<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./radio-assembly.css">
    <link rel="stylesheet" href="./24layout.assembly.css">
    <title>radio</title>
</head>
<body>
    <nav class="nav">
        <li>
            <a href="#radio-basic">基本单选框</a>
        </li>
        <li>
            <a href="#radio-disabled">禁用状态</a>
        </li>
        <li>
            <a href="#radio-group">单选框组合</a>
        </li>
        <li>
            <a href="#radio-normal">垂直单选框</a>
        </li>
        <li>
            <a href="#radio-size">单选框大小</a>
        </li>
        <li>
            <a href="#radio-tectonic">单选框样式</a>
        </li>
        <li>
            <a href="#radio-custom">自定义单选框</a>
        </li>
        <li>
            <a href="#">回到顶部</a>
        </li>
    </nav>
    <div class="row gutter-8">
        <div class="col-24" id="radio-basic">
            <div class="container">
                <label  class="radio">
                    <input type="radio" value="">
                    <div class="radio-circular">Radio</div>
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>基本单选框</h3>
                    <p>最基本的用法。</p>
                </div>
                <pre>
                    <code>
&ltlabel  class="radio">
    &ltinput type="radio" value="">
    &ltdiv class="radio-circular">Radio&lt/div>
&lt/label>
                    </code>
                </pre>
            </div>
        </div>
        <div class="col-24" id="radio-group">
            <div class="container">  
                <label  class="radio">
                    <input type="radio" value=""  name="compose">
                    <div class="radio-circular">A</div>
                </label>
                <label class="radio">
                    <input type="radio" value=""  name="compose" >
                    <div class="radio-circular">B</div>
                </label> 
                <label class="radio">
                    <input type="radio" value=""  name="compose" >
                    <div class="radio-circular">C</div>
                </label>
                <label class="radio">
                    <input type="radio" value=""  name="compose" >
                    <div class="radio-circular">D</div>
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>单选框组合</h3>
                <p>用相同的name将radio组合起来。采用相同的name互斥</p>
                </div>
                <pre>
                    <code>
&ltlabel  class="radio">
    &ltinput type="radio" value=""  name="compose">
    &ltdiv class="radio-circular">A&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value=""  name="compose">
    &ltdiv class="radio-circular">B&lt/div>
&lt/label> 
&ltlabel class="radio">
    &ltinput type="radio" value=""  name="compose">
    &ltdiv class="radio-circular">C&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value=""  name="compose">
    &ltdiv class="radio-circular">D&lt/div>
&lt/label>
&ltstyle>
    .radio:not(:last-child){
        margin-right: 10px;
    }
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
        <div class="col-24" id="radio-size">
            <div class="container"> 
                <label  class="radio">
                    <input type="radio" value="" name="small">
                    <div class="radio-content radio-small">apple</div>   
                </label>
                <label  class="radio">
                    <input type="radio" value="" name="small">
                    <div class="radio-content radio-small">banana</div>    
                </label>
                <br>
                <br> 
                <label class="radio">
                    <input type="radio" value="" name="medium">
                    <div class="radio-content">apple</div>   
                </label>
                <label class="radio">
                    <input type="radio" value="" name="medium">
                    <div class="radio-content">banana</div>
                </label>
                <br>
                <br>
                <label class="radio">
                    <input type="radio" value=""  name="large">
                    <div class="radio-content radio-large">apple</div>
                </label>
                <label  class="radio">
                    <input type="radio" value=""  name="large">
                    <div class="radio-content radio-large">banana</div>
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>单选框大小</h3>
                <p>使用radio-content配合radio-large，radio-small实现不同大小的文字单选框。</p>
                </div>
                <pre>
                    <code>
&ltlabel  class="radio">
    &ltinput type="radio" value="" name="small">
    &ltdiv class="radio-content radio-small">apple&lt/div>    
&lt/label>
&ltlabel  class="radio">
    &ltinput type="radio" value="" name="small">
    &ltdiv class="radio-content radio-small">banana&lt/div>   
&lt/label>
&ltbr>
&ltbr> 
&ltlabel class="radio">
    &ltinput type="radio" value="" name="medium">
    &ltdiv class="radio-content">apple&lt/div>    
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="medium">
    &ltdiv class="radio-content">banana&lt/div>
&lt/label>
&ltbr>
&ltbr>
&ltlabel class="radio">
    &ltinput type="radio" value=""  name="large">
    &ltdiv class="radio-content radio-large">apple&lt/div>
&lt/label>
&ltlabel  class="radio">
    &ltinput type="radio" value=""  name="large">
    &ltdiv class="radio-content radio-large">banana&lt/div>
&lt/label>
&ltstyle>
    .radio:not(:last-child){
        margin-right: 10px;
    }
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
        <div class="col-24" id="radio-custom">
            <div class="container">   
                <label  class="radio">
                    <input type="radio" value="">
                    <div class="radio-circular">Radio-default</div>    
                </label>
                <div class="size">
                    <label  class="radio"> 
                        <input type="radio" value="">
                        <div class="radio-circular">Radio-size</div>    
                    </label>    
                </div>
                <div class="color">
                    <label  class="radio"> 
                        <input type="radio" value="">
                        <div class="radio-circular">Radio-color</div>
                    </label> 
                </div>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>自定义单选框</h3>
                    <p>通过改变radio或radio-block下的变量：--radio ，--radio-color ，--radio-shadow的值来改变单选框的样式。通过改变radio或radio-block下--radio改变文字与圆点距离。</p>
                </div>
                <pre>
                    <code>
&ltlabel  class="radio">
    &ltinput type="radio" value="">
    &ltdiv class="radio-circular">Radio-default&lt/div>
&lt/label>
&ltlabel  class="radio">
    &ltinput type="radio" value="">
    &ltdiv class="radio-circular">Radio-size&lt/div>
&lt/label>
&ltlabel  class="radio">
    &ltinput type="radio" value="">
    &ltdiv class="radio-circular">Radio-color&lt/div>
&lt/label>
&ltstyle>
    .radio:nth-child(2){
        --radio:30px;
}
    .radio:nth-child(3){
        --radio-color:rgb(255, 24, 24);
        --radio-shadow:rgba(255, 24, 24,0.2) ;
}
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
    </div>
    </div>
    <div class="row gutter-8">
        <div class="col-24" id="radio-disabled">
            <div class="container">                   
                <label  class="radio">
                    <input type="radio" value="" disabled>
                    <div class="radio-circular">Disabled</div>
                </label>
                <label  class="radio">
                    <input type="radio" value="" disabled checked>
                    <div class="radio-circular">Disabled+Checked</div>    
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>禁用状态</h3>
                    <p>radio不可用。</p>
                </div>
                <pre>
                    <code>
&ltlabel  class="radio">
    &ltinput type="radio" value="" disabled>
    &ltdiv class="radio-circular">Disabled&lt/div>
&lt/label>
&ltlabel  class="radio">
    &ltinput type="radio" value="" disabled checked>
    &ltdiv class="radio-circular">Disabled+Checked&lt/div>
&lt/label>
&ltstyle>
    .radio:not(:last-child){
        margin-right: 10px;
    }
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
        <div class="col-24" id="radio-normal">
            <div class="container">
                <label class="radio-block">
                    <input type="radio" value="" name="Option">
                    <div class="radio-circular">Option-1</div>
                </label>
                <label class="radio-block">
                    <input type="radio" value="" name="Option">
                    <div class="radio-circular">Option-2</div>
                </label>
                <label class="radio-block">
                    <input type="radio" value="" name="Option">
                    <div class="radio-circular">Option-3</div>
                </label>
                <label class="radio-block">
                    <input type="radio" value="" name="Option">
                    <div class="radio-circular">Option-4</div>
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>垂直单选框</h3>
                <p>使用radio-block使单选框垂直排列。</p>
                </div>
                <pre>
                    <code>
&ltlabel class="radio-block">
    &ltinput type="radio" value="" name="Option">
    &ltdiv class="radio-circular">Option-1&lt/div>
&lt/label>
&ltlabel class="radio-block">
    &ltinput type="radio" value="" name="Option">
    &ltdiv class="radio-circular">Option-2&lt/div>
&lt/label>
&ltlabel class="radio-block">
    &ltinput type="radio" value="" name="Option">
    &ltdiv class="radio-circular">Option-3&lt/div>
&lt/label>
&ltlabel class="radio-block">
    &ltinput type="radio" value="" name="Option">
    &ltdiv class="radio-circular">Option-4&lt/div>
&lt/label>
&ltstyle>
    .radio-block:not(:last-child){
        margin-right: 10px;
    }
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
        <div class="col-24" id="radio-tectonic">
            <div class="container">
                <label class="radio">
                    <input type="radio" value="" name="fruits-1">
                    <div class="radio-circular">apple</div> 
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-1">
                    <div class="radio-circular">banana</div>
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-1"disabled>
                    <div class="radio-circular">orange</div>
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-1"disabled checked>
                    <div class="radio-circular">pear</div>
                </label>
                <br>
                <br>
                <label class="radio">
                    <input type="radio" value="" name="fruits-2">
                    <div class="radio-content">apple</div>
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-2">
                    <div class="radio-content">banana</div>    
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-2"disabled>
                    <div class="radio-content">orange</div>   
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-2"disabled checked>
                    <div class="radio-content">pear</div>   
                </label>
                <br>
                <br>
                <label class="radio">
                    <input type="radio" value="" name="fruits-3">
                    <div class="radio-content radio-fill">apple</div>
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-3">
                    <div class="radio-content radio-fill">banana</div>    
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-3"disabled>
                    <div class="radio-content radio-fill">orange</div>   
                </label>
                <label class="radio">
                    <input type="radio" value="" name="fruits-3"disabled checked>
                    <div class="radio-content radio-fill">pear</div>   
                </label>
            </div>
            <div class="container-content">
                <div class="content">
                    <h3>单选框样式</h3>
                <p>使用radio-circular，radio-content和radio-fill实现不同的单选框。</p>
                </div>
                <pre>
                    <code>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-1">
    &ltdiv class="radio-circular">apple&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-1">
    &ltdiv class="radio-circular">banana&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-1"disabled>
    &ltdiv class="radio-circular">orange&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-1"disabled checked>
    &ltdiv class="radio-circular">pear&lt/div>
&lt/label>
&ltbr>
&ltbr>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-2">
    &ltdiv class="radio-content">apple&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-2">
    &ltdiv class="radio-content">banana&lt/div>    
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-2"disabled>
    &ltdiv class="radio-content">orange&lt/div>   
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-2"disabled checked>
    &ltdiv class="radio-content">pear&lt/div>   
&lt/label>
&ltbr>
&ltbr>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-3">
    &ltdiv class="radio-content radio-fill">apple&lt/div>
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-3">
    &ltdiv class="radio-content radio-fill">banana&lt/div>    
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-3"disabled>
    &ltdiv class="radio-content radio-fill">orange&lt/div>   
&lt/label>
&ltlabel class="radio">
    &ltinput type="radio" value="" name="fruits-3"disabled checked>
    &ltdiv class="radio-content radio-fill">pear&lt/div>   
&lt/label>
&ltstyle>
    .radio:not(:last-child){
        margin-right: 10px;
    }
&lt/style>
                    </code>
                </pre>
            </div>
        </div>
    </div>
    <style>
        body{
            display: flex;
            align-items: flex-start;
            gap: 8px;
            
        }
        .row:nth-of-type(1){
            margin-left: 19%;
        }
        .row{
            width: 40%;
            margin: 10px 0;
        }
        .col-24{
            border: solid rgb(202, 202, 202) 1px;
            border-radius: 20px;
            padding: 1%;
            height: min-content;
        }
        .container{
            border: solid rgba(202, 202, 202,0.5) 1px;
            border-radius: 20px;
            padding: 5%;
        }
        .container-content{
            border: solid rgba(202, 202, 202,0.5) 1px;
            border-radius: 20px;
            padding-bottom: 5%;
            margin-top: 5px;
        }
        .content{
            padding:5% ;
            padding-bottom: 5px;
            border-bottom: 1px silver solid;
        }
        h3{
            padding-bottom: 5px;
        }
        pre{
            overflow: auto;
            margin:5% 5% 0;
        }
        .radio:not(:last-child){
            margin-right: 10px;
        }
        .radio-block:not(:last-child){
            margin-bottom: 10px;
        }
        .size > .radio{
            --radio:30px;
        }
        .color .radio:last-child{
            --radio-color:rgb(255, 24, 24);
            --radio-shadow:rgba(255, 24, 24,0.2) ;
        }
        nav{
            position: fixed;
            display: flex;
            flex-direction: column;
            list-style-type: none;
            width: 17%;
            left: 1%;
            top: 10px;
            border: 3px outset rgb(69, 184, 250);
            border-radius: 8px;
            background-color: white;
            padding-top: 1vh;
            padding-left: 1vh;
            padding-right: 0.5vh;
        }
        li{
            border-radius: 8px;
            padding: 0px 3px;
            text-align: center;
            height: 7vh;
            margin-bottom: 1vh;
            border: 3px outset rgb(82, 81, 81);
            background-color: rgb(165, 165, 165);
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        li:hover>a{
            color: rgb(27, 27, 37);
        }
        li:hover{
            border: 3px outset rgb(99, 99, 99);
            background-color: rgb(230, 230, 230);
        }
        li:active{
            border: 3px inset rgb(56, 56, 56);
            background-color: rgb(165, 165, 165);
        }
        li:active>a{
            color: white;
        }
        a{
            display: block;
            text-decoration: none;
            color: white;
            font-weight: 600;
            letter-spacing: 2px;
            line-height:calc(7vh - 8px);
            width: 100%;
            height: 100%;
        }
        code{
            width: 100%;
            display: block;
            flex: none;
            color:rgb(0, 17, 255);
            font-family: Consolas, 'Courier New', monospace;
            font-size: 14px;
            font-weight: 500;
            filter: brightness(120%);
        }
        html{
            scroll-behavior: smooth;
        }
        body::-webkit-scrollbar{
            width: 0.8vw;
            background-color: rgb(190, 190, 190);
            border-radius: 1233px;
        }
        body::-webkit-scrollbar-thumb{
            width: 0.8vw;
            background-color:rgb(0, 174, 255) ;
            border: solid 0.2vw rgb(0, 174, 255);
            border-radius: 1233px;
        }
    </style>
</body>
</html>